<template>
<!-- <div class="flex-1 h-[300px] bg-yellow-300"> -->
    <div class="flex-1">
        <div class="btn_box">
            <el-button class="ed-button ed_black-bottom ed-button36" @click="addDevice"><svg-icon icon-class="add-svg"/>新增设备</el-button>
        </div>
        <ApiTable :api="api.list" ref="table" :params="data.params">
            <el-table-column type="index" width="80" label="序号"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="parkId" label="停车系统车场ID"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="stationNo" label="终端号"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="baseUrl" label="车场域名"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" label="操作">
                <template slot-scope="scope">
                    <el-button class="ed-table-bottom ed_black_border" @click="edit(scope.row)">编辑</el-button>
                    <el-button style="margin-right: 10px" class="ed-table-bottom ed_delete_border" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </ApiTable>
        <EdConfirmDelete ref="confirmDeleteRef" @confirmDeleteTrue="confirmDeleteTrue"></EdConfirmDelete>
        <EdDialog ref="edDialog" :width="'560px'" :title="data.isUpdate?'编辑设备':'新增设备'" v-if="data.addDialogVisible"  @save-dialog="addDialogSave" @close-dialog="addDialogClose">
            <el-form ref="formRef" :model="form" label-position="right" label-width="auto">
                <el-form-item label="停车系统车场ID" prop="parkId" :rules="$validate.validates({required:true,msg:'不能为空'})">
                    <el-input placeholder="请输入" v-model="form.parkId" maxlength="50"></el-input>
                </el-form-item>
                <el-form-item label="终端号" prop="stationNo" :rules="$validate.validates({required:true,msg:'不能为空'})">
                    <el-input placeholder="多个终端号以英文 ; 号隔开" v-model="form.stationNo" maxlength="50"></el-input>
                </el-form-item>
                <el-form-item label="车场域名" prop="baseUrl" :rules="$validate.validates({required:true,msg:'不能为空'})">
                    <el-input placeholder="请输入" v-model="form.baseUrl" maxlength="50"></el-input>
                </el-form-item>
            </el-form>
        </EdDialog>
    </div>
</template>

<script setup>
    import ApiTable from 'src/components/ApiTable.vue'
    import PageCard from 'src/views/components/PageCard.vue'
    import EdConfirmDelete from "src/components/EdConfirmDelete.vue"
    import EdDialog from 'src/components/EdDialog.vue'
    import { onActivated, nextTick, ref, reactive, onMounted, defineProps } from 'vue'
    import * as api from './api.ts'
    import message from 'src/utils/once-message'
    import router from 'src/router'
    const props = defineProps({
        interface: Object,
        village: Object
    })
    const form = reactive({
        parkId: '',
        stationNo: '',
        baseUrl: '',
    })
    const data = reactive({
        confirmRow: null,
        addDialogVisible: false,
        isUpdate: false,
        params: {
            villageId: props.village.id,
            dockingWay: props.interface.code,
        }
    })
    const table = ref()
    onMounted(()=>{
        nextTick(()=>{
            table.value.load(1)
        })
    })

    const formRef = ref()
    const edDialog = ref()
    function addDevice(){
        data.isUpdate = false
        data.addDialogVisible = true
    }
    function addDialogSave(){
        formRef.value.validate((valid)=>{
            if(valid){
                let funcApi = data.isUpdate ? api.edit : api.add;
                Object.assign(form, {
                    villageId: props.village.id,
                    dockingWay: props.interface.code,
                })
                funcApi(form).then(response => {
                    if(response.success) {
                        message.success({
                            message: '保存成功',
                            center: true,
                            duration: 2000,
                        });
                        table.value.load()
                        addDialogClose()
                    }
                }).catch(()=>{
                    edDialog.value.hideLoading()
                })
            }else{
                edDialog.value.hideLoading()
            }
        })
    }
    function addDialogClose(){
        formRef.value.clearValidate()
        Object.assign(form, {
            parkId: '',
            stationNo: '',
            baseUrl: '',
        })
        edDialog.value.hideLoading()
        data.addDialogVisible = false
    }

    function edit(row){
        data.isUpdate = true
        api.detail({id: row.id}).then(res=>{
            if(res.success) {
                Object.assign(form, res.data)
                data.addDialogVisible = true
            }
        })
    }
    const confirmDeleteRef = ref()
    function del(row){
        data.confirmRow = row;
        confirmDeleteRef.value.open("删除确认","确定删除此项设备？","warning")
    }
    // 删除回调
    function confirmDeleteTrue(){
        // return
        api.del({id: data.confirmRow.id}).then(res => {
            if(res.success) {
                message.success({
                    message: '删除成功！',
                    duration: 2000,
                    center:true
                });
                table.value.load()
            }
        })
    }

</script>

<style scoped>
    .btn_box{
        /* height: 14%; */
        height: 56px;
        text-align: right;
        padding: 10px;
    }
    /* :deep(.el-card__header){
        display: block !important;
        background: #fff !important;
        min-height: 64px !important;
    } */
    :deep(.api-table){
        height: calc(100% - 56px);
        display: flex;
        flex-direction: column;
    }
</style>